<template>
	<view class="content">
        
		<view class="circleprogress">
			<view class="progresstext">{{progresstext}}</view>
			<view class="wrapper">
				<view class="leftprogress" :style="{ transform: leftprogress}"></view>
			</view>
			<view class="wrapper">
				<view class="rightprogress" :style="{ transform: rightprogress}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['progresstext'],
		data() {
			return {
				leftprogress: 'rotate(-45deg)',
				rightprogress: 'rotate(45deg)',
				// progresstext:'30'
			}
		},
		created() {
			console.log('progresstext',this.progresstext)
			this.sliderchange(this.progresstext)
		},
		onLoad() {
			
		},
		methods: {
			sliderchange:function(event){
				// var val = event.detail.value;
				var val = event;
				console.log(event)
				// val = val/10;
				// this.progresstext = val;
				var deg = val/100*360;
				if(deg<=180)
				{
					this.rightprogress = 'rotate('+(45+deg)+'deg)'
					this.leftprogress = 'rotate('+(-45)+'deg)'
				}else
				{
					this.rightprogress = 'rotate('+(45+180)+'deg)'
					this.leftprogress = 'rotate('+(-45+(deg-180))+'deg)'
				}
			}
		},
		computed:{
			
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-flow: wrap;
		align-items: center;
		/* border-radius: 50%; */
		text-align: center;
		height: 200upx;
		background-color: #FFFFFF;
		/* padding-top: 50px; */
		
	}
	.circleprogress{
		width: 100%;
		height: 200upx;
		display: flex;
		justify-content: center;
		
		
	}
	.circleprogress .progresstext{
		position: absolute;
		font-size: 64upx;
		width: 200upx;
		height: 200upx; 
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		color: #000000;
	}
	.circleprogress .wrapper{
		width: 100upx;
		height: 200upx;
		overflow: hidden;
		
	}
	.circleprogress .leftprogress,.rightprogress{
		width: 160upx;
		height: 160upx;
		border:20upx solid #F5F5F5;
		border-bottom:20upx solid #FFD344;
		border-radius: 50%;
		
	}
	.circleprogress .leftprogress{
		border-right:20upx solid #FFD344;
	}
	.circleprogress .rightprogress{
		border-left:20upx solid #FFD344;
		margin-left: -100upx;
	}
	.section{
		width: 80%;
		margin-top: 50px;
	}
    
</style>
